<template>
	<scroll-view scroll-y class="bgf5 group c00" :style="{height: 'calc(100vh  - ' + statusBar + 'px)'}">
		<view v-for="(item,index) in list" :key="index" class="px10 bgff r6 py12 my10 mx16 shadow">
			<view class="bold6 pb8">{{item.sku_name}}</view>
			<view class="flex flexC fs12 pb12 box">
				<view class="mr4">
					<view class="origin"></view>
					<view class="c57 mt2"></view>
				</view>
				<view class="cff0">
					<text class="fs12">￥</text>
					<text class="fs28 bold6">{{item.price}}</text>
				</view>
			</view>
			<view class="flex flexC pt12">
				<view @click="openItem(item)" class="flex1 flexC flex ">
					<text class="c9d fs12"></text>
				</view>
				<text @click="clickRel(item)" class="bg41 r40 px10 py2" v-if="item.room_id == ''">未关联</text>
				<text @click="clickRel(item)" class="bgf0 r40 px10 py2" v-else>已关联</text>

			</view>
			<view v-if="item.check" class="mt6 bgff">
				<view class="fs12 px10 mb5" v-for="(rule,index) in item.rule_txt" :key="subIndex">
					<text class="c2e">{{rule.id}}.{{rule.value}}</text>
				</view>

			</view>
		</view>

		<!-- 团购券使用范围弹框 -->
		<uni-popup type="center" ref="popup">
			<view class="bgff r10 px30 pb20 flex flexC flexJC flexCol">
				<view class="fs16 bold6 py22">团购券使用范围</view>
				<view class="bor57 aliC">
					<view class="flex flexC borb57">
						<view class="left py5">适用门店</view>
						<view class="right py5">适用包间</view>
					</view>
					<view class="flex flexC fs12" v-for="item in currentShopRoom">
						<view class="left">【{{item.shopName}}】</view>
						<view class="right">
							<view v-for="(sub,index) in item.room" :key="index" class="py4">{{sub.name}}</view>
						</view>
					</view>
				</view>
				<button class="bg57 r40 w-15 fs14 mt20" @click="$refs.popup.close()">好的，知道啦</button>
			</view>
		</uni-popup>

		<uni-popup ref="pop" type="bottom">
			<view class="popup-content2">
				<button @click="doClickMenu('qp')" class="popup-btn button">包厢券</button>
				<button @click="doClickMenu('tq')" class="popup-btn button">台球券</button>

				<view class="popup-btn" @click="$refs.pop.close()">取消</view>
			</view>

		</uni-popup>
	</scroll-view>
</template>

<script>
	export default {
		name: "group-coupon",
		props: {
			statusBar: {
				type: Number,
				default: 20
			},
			selectShop: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				isChecked: false,
				page: 1,
				list: [],
				currentShopRoom: [],
				currentItem:null
			};
		},
		methods: {

			doClickMenu(type) {
				this.$refs.pop.close();

				if (type == 'tq') {
					uni.navigateTo({
						url: '/other/dou/couponTqSet?item=' + JSON.stringify(this.currentItem)
					})
				} else {
					uni.navigateTo({
						url: '/other/dou/couponSet?item=' + JSON.stringify(this
							.currentItem)
					})
				}

			},


			clickRel(item) {
				this.currentItem = item;
				this.$refs.pop.open();
			},
			close(item) {


				let param = {
					tuan_id: item.id
				};
				let that = this;
				this.$api.closeTuan(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						uni.showModal({
							title: "操作提示",
							content: "作废成功",
							showCancel: false,
							complete() {
								that.$emit("refresh")

							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},


			openItem(item) {

				// for(var i=0;i<this.list.length;i++){
				// 	this.list[i].check = false;
				// }
				if (item.check == true) {
					item.check = false;
				} else {
					item.check = true;
				}

				console.info("==item check==" + item.check);
			},
			look(item) {
				let param = {
					id: item.id,
				};
				let that = this;
				this.$api.lookRoom(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.currentShopRoom = res.data;
						that.$refs.popup.open();

					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})

			},
			getData(selectShop) {

				let param = {
					shop_id: selectShop.id,
					page: this.page
				};
				let that = this;
				this.$api.douCouponList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
					} else {

					}
				})
				console.log(selectShop)
				// this.$nextTick(() => {
				// 	this.$refs.popup.open();
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group {
		.box {
			border-bottom: 4rpx dashed #eee;

			.origin {
				text-decoration-line: line-through;
			}
		}

		.w10 {
			width: 20rpx;
			height: 12rpx;
			transform: rotate(90deg);
			transition: .5s;

			&.up {
				transform: rotate(180deg);
			}
		}

		.borb57 {
			border-bottom: 2rpx solid #576DAB;
		}

		.left {
			width: 200rpx;
			height: 100%;
		}

		.right {
			width: 300rpx;
			border-left: 2rpx solid #576DAB;
		}
	}
	
	
	
	.popup-content2 {
		background: #FFFFFF;
	
		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}
	
		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}
	
		button::after {
			border: none;
		}
	
		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>